---
export interface Props {
  title: string;
}

const {title} = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/lookbook/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

<style lang="scss" is:global>
  $color-background: rgb(13 15 20); // #252525;
  $color-primary: #adafb4;
  $hue-shift: 10deg;

  :root {
    --color-background: #{$color-background};
    --color-background-dark: #{darken($color-background, 5%)};
    --color-background-light: #{lighten($color-background, 10%)};
    --color-primary: #{$color-primary};
    --color-primary-darker: #{adjust-hue(darken($color-primary, 20%), -$hue-shift)};
    --color-primary-inactive: #{adjust-hue(darken($color-primary, 25%), -$hue-shift)};
    --color-primary-highlight: #{adjust-hue(lighten($color-primary, 25%), $hue-shift)};
  }

  html {
    font-family: system-ui, sans-serif;
    background-color: var(--color-background);
  }
  code {
    font-family:
      Menlo,
      Monaco,
      Lucida Console,
      Liberation Mono,
      DejaVu Sans Mono,
      Bitstream Vera Sans Mono,
      Courier New,
      monospace;
  }
</style>
